<template>
    <div class="edit-box">

        <div class="e-cell ">
            <div class="e-label">图片上传</div>
            <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
                token: $pinia.state.value.store.token
            }" :show-file-list="false" :on-success="handleImgSuccess">
                <img v-if="main.bg_img" :src="$imgUrl + main.bg_img" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
                <el-icon v-if="main.bg_img" class="img-close-icon" @click.stop="main.bg_img = ''">
                    <CircleClose />
                </el-icon>
            </el-upload>
        </div>
        <div class="e-cell" v-if="main.bg_img" >
            <el-button type="primary" @click="addImgHot">添加图片热区</el-button>
        </div>
        <div class="img-hox-box" v-if="main.list">
            <draggable :list="main.list" ghost-class="ghost" chosen-class="chosenClass" animation="300">
                <template #item="{ element, index }">
                    <div class="img-hot-item">
                        <el-descriptions class="margin-top" :column="2" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        宽
                                    </div>
                                </template>
                                <el-input v-model="element.w"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        高
                                    </div>
                                </template>
                                <el-input v-model="element.h"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        离左边
                                    </div>
                                </template>
                                <el-input v-model="element.x"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        离上边
                                    </div>
                                </template>
                                <el-input v-model="element.y"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        层级
                                    </div>
                                </template>
                                <el-input v-model="element.z"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        点击类型
                                    </div>
                                </template>
                                <el-select v-model="element.click_type" style="width: 165px;">
                                    <el-option label="跳转链接" value="link" />
                                    <el-option label="领取优惠券" value="receive_coupon" />
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        链接
                                    </div>
                                </template>
                                <el-input v-model="element.link"></el-input>
                            </el-descriptions-item>

                        </el-descriptions>

                        <el-icon class="imghot-del-btn" @click="delHotItem(index)" color="#f00" size="24">
                            <CircleClose />
                        </el-icon>
                    </div>
                </template>
            </draggable>

        </div>

    </div>
</template>

<script setup name="HotImage">
import draggable from 'vuedraggable'

const props = defineProps({
    info: {
        required: true,
        default: {
        }
    },
});

const data = reactive({
    main: {
        list: []
    }
})
const { main } = toRefs(data)
onMounted(() => {
    data.main = props.info
})


function addImgHot() {
    data.main.list.push({
        x: 0,
        y: 0,
        z: 2,
        w: 100,
        h: 100,
        url: '',
        click_type: 'link'
    })
}

function delHotItem(index) {
    data.main.list.splice(index, 1)
}

function handleImgSuccess(res) {
    if (res.code == 0) {
        data.main.bg_img = res.data.url
    }
}



</script>
<style lang="scss" scoped>
.edit-box {
    width: 100%;
    height: auto;
    padding: 20px;

    .e-cell{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .e-label{
            margin-right: 20px;
        }
    }

    .img-hot-item {
        position: relative;
        margin-bottom: 20px;

        .imghot-del-btn {
            position: absolute;
            right: -12px;
            top: -12px;
        }
    }
}
</style>
